<!-- 首页内容组件 -->
<template>
  <div class="index">
    <Loading v-if="!showhideloading"></Loading>
    <div
      class="index-content"
      v-else
      infinite-scroll-distance="10"
      v-infinite-scroll="loadMore"
    >
      <div class="index-header">
        <div class="bgcolor" :style="colorObj"></div>
        <div class="bg" v-if="hideBg"></div>
        <Swipe @changeColor="IndexColor" :slideData="bgArr"></Swipe>
      </div>
      <div class="container">
        <Quicknav :slideData="slideData[3].data.list"></Quicknav>
      </div>
      <div class="hotspot">
        <Indexnews></Indexnews>
      </div>
      <div class="depreciate">
        <div class="img">
          <img src="@/assets/image/02.png" alt="" />
        </div>
      </div>
      <div class="limit">
        <Limit :limitData="limitData"></Limit>
      </div>
      <div class="team">
        <Team></Team>
      </div>
      <div class="purchases">
        <Purchase></Purchase>
      </div>
      <div class="store">
        <Store></Store>
      </div>
      <div class="more">
        <ul class="tabs">
          <li
            :class="liindex == index ? 'active' : ''"
            v-for="(tab, index) in listtabs"
            :key="tab.id"
            @click="changeTabs(index, tab.type)"
          >
            <strong v-text="tab.title"></strong>
            <span v-text="tab.tips"></span>
          </li>
        </ul>
        <List :moreData="moreData" :loading="loading"></List>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Swipe from "@/components/Swipe";
import Quicknav from "../components/Quicknav";
import Indexnews from "../components/Indexnews";
import Limit from "../components/Limit";
import Team from "../components/Team";
import Purchase from "../components/Purchase";
import Store from "../components/Store";
import List from "@/components/List";
import Loading from "@/components/Loading";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    Swipe,
    Quicknav,
    Indexnews,
    Limit,
    Team,
    Purchase,
    Store,
    List,
    Loading,
  },
  data() {
    //这里存放数据
    return {
      bgArr: [],
      colorObj: {},
      hideBg: false,
      liindex: 0,
      listtabs: [
        {
          id: 1,
          title: "精选",
          tips: "为你推荐",
          type: "is_best",
        },
        {
          id: 2,
          title: "社区",
          tips: "新奇好物",
          type: "",
        },
        {
          id: 3,
          title: "新品",
          tips: "潮流上新",
          type: "is_new",
        },
        {
          id: 4,
          title: "热卖",
          tips: "火热爆款",
          type: "is_hot",
        },
      ],
      page: 1,
      size: 10,
      type: "is_best",
    };
  },
  //监听属性 类似于data概念
  computed: {
    slideData() {
      return this.$store.state.sildeData;
    },
    limitData() {
      return this.$store.state.limitData;
    },
    moreData() {
      return this.$store.state.moreData;
    },
    loading() {
      return this.$store.state.loading;
    },
    showhideloading() {
      return this.$store.state.showloading;
    },
  },
  //监控data中的数据变化
  watch: {
    slideData() {
      this.bgArr = this.$store.state.sildeData[2].data.list;
    },
  },
  //方法集合
  methods: {
    scrollindex() {
      if (document.documentElement.scrollTop > 50) {
        this.hideBg = true;
      } else {
        this.hideBg = false;
      }
    },
    IndexColor(data) {
      this.colorObj = { background: this.bgArr[data].bgColor };
    },
    loadMore() {
      this.page++;
      let params = {
        page: this.page,
        size: this.size,
        type: this.type,
      };
      this.$store.dispatch("ActchangemoreData", params);
    },
    changeTabs(index, type) {
      this.$store.state.moreData = [];
      this.liindex = index;
      this.page = 1;
      this.type = type;
      let params = {
        page: this.page,
        size: this.size,
        type: this.type,
      };
      this.$store.dispatch("ActchangemoreData", params);
    },
  },
  beforeCreate() {
    this.$store.dispatch("ActchangesildeData", { id: 3 });
  },
  mounted() {
    this.$store.dispatch("ActchangelimitData");
    let params = {
      page: this.page,
      size: this.size,
      type: this.type,
    };
    this.$store.dispatch("ActchangemoreData", params);
    window.addEventListener("scroll", this.scrollindex, false);
  },
  destroyed() {
    this.$store.state.moreData = [];
  },
};
</script>
<style lang="less">
.index {
  .bgcolor {
    z-index: -1;
    width: 100%;
    height: 20rem;
    background: #f34646;
    position: absolute;
    top: -180px;
    border-bottom-left-radius: 2rem;
    border-bottom-right-radius: 2rem;
  }
  .bg {
    height: 8.1rem;
    background-color: #f34646;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
  }
  .container {
    height: 20rem;
    position: relative;
    width: 94%;
    margin-top: 10px;
    margin-left: 3%;
    border-radius: 15px 15px 0 0;
    background: #fff;
  }
}
.depreciate {
  width: 100%;
  .img {
    padding: 12px 12px 0;

    img {
      width: 100%;
    }
  }
}
.more {
  .tabs {
    padding: 1rem 0;
    display: flex;
    justify-content: center;
    align-items: center;

    li {
      flex: 1;
      position: relative;
      text-align: center;

      &:after {
        content: " ";
        position: absolute;
        height: 80%;
        width: 1px;
        right: 0;
        top: 10%;
        background-color: #ccc;
      }

      &:last-child {
        &:after {
          height: 0;
        }
      }

      strong {
        font-size: 1.4rem;
        color: #333;
        display: block;
      }

      span {
        display: inline-block;
        font-size: 0.5rem;
        color: #888;
        border-radius: 1rem;
        padding: 0.1rem 0.8rem;
        margin-top: 0.2rem;
      }
    }

    .active {
      span {
        background: linear-gradient(-88deg, #ff4f2e, #f91f28);
        color: #fff;
      }
    }
  }
}
</style>